<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas Demo</title>
  </head>
  <body>
    <canvas width="100px" height="100px" id="canvas" />
    <script>
      const canvasEl = document.getElementById("canvas");
      const ctx = canvasEl.getContext("2d");

      function draw() {
        ctx.clearRect(0, 0, 100, 100);
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.fillRect(0, 0, 50, 50);
        // ctx.globalAlpha = 0.4;
        ctx.fillStyle = "rgb(0,0,255)";
        ctx.fillRect(50, 50, 50, 50);
        window.requestAnimationFrame(draw);
      }
      window.requestAnimationFrame(draw);
    </script>
  </body>
</html>
